﻿<!DOCTYPE html>

<html>
<head>
<!--
  Copyright (c) 2016-2018 Jean-Marc VIGLINO, 
  released under CeCILL-B (french BSD like) licence: http://www.cecill.info/
-->
  <title>ol-ext: Transform interaction</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

  <meta name="description" content="transform interaction for OL3" />
  <meta name="keywords" content="ol, openlayers, vector, transform, rotate, scale, stretch" />

  <link rel="stylesheet" href="../style.css" />

  <!-- jQuery -->
  <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
  <!-- FontAwesome -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

  <!-- Openlayers -->
  <link rel="stylesheet" href="https://openlayers.org/en/latest/css/ol.css" />
  <script type="text/javascript" src="https://openlayers.org/en/latest/build/ol.js"></script>
  <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL,Object.assign"></script>
  
  <!-- ol-ext -->
  <link rel="stylesheet" href="../../dist/ol-ext.css" />
  <script type="text/javascript" src="../../dist/ol-ext.js"></script>


</head>
<body >
  <a href="https://github.com/Viglino/ol-ext" class="icss-github-corner"><i></i></a>

  <a href="../../index.html">
    <h1>ol-ext: Transform interaction</h1>
  </a>
  <div class="info">

    <!-- force font to load -->
    <i class="fa fa-rotate-left" style="position:absolute; top:-1000px;"></i>

    <b>ol.interaction.Transform</b> is an interaction to transform features (scale, translate, rotate).
    Handles are drawn on the map to manipulate the features
    <ul><li>
        Properties can be set to select transforming operations.
      </li><li>
        Handles can be styled with ol.style.
      </li><li>
        ol.event are thrown to control the transformation (to set an angle propertie on point features to use with ol.style for example)
      </li>
    </li></ul>
  </div>

  <!-- Map div -->
  <div id="map" style="width:600px; height:400px;"></div>

  <div class="options" >
    <h2>Options:</h2>
    <ul><li>
      <input id="style" type="checkbox" onchange="setHandleStyle()" /><label for="style"> styles transform handles (using fontawesome)</label>
    </li><li>
      <input id="scale" type="checkbox" onchange="setPropertie(this.id);" checked="checked" /><label for="scale"> enable scale</label>
    </li><li>
      <input id="stretch" type="checkbox" onchange="setPropertie(this.id);" checked="checked" /><label for="stretch"> enable stretch</label>
    </li><li>
      <input id="rotate" type="checkbox" onchange="setPropertie(this.id);" checked="checked" /><label for="rotate"> enable rotate</label>
    </li><li>
      <input id="translate" type="checkbox" onchange="setPropertie(this.id);" checked="checked" /><label for="translate"> enable translate</label>
    </li><li>
      <input id="translateFeature" type="checkbox" onchange="setPropertie(this.id);" /><label for="translateFeature"> translate when click on feature</label>
    </li><li>
        <input id="keepAspectRatio" type="checkbox" onchange="setAspectRatio(this.id);" /><label for="keepAspectRatio"> force keepAspectRatio (default use <i>Shift</i>)</label>
      </li><li>
        <input id="enableRotatedTransform" type="checkbox" onchange="setPropertie(this.id);" /><label for="enableRotatedTransform"> force matching the map rotation</label>
      </li><li>
      SetRotateCenter:
      <button onclick='firstPoint=false; interaction.setCenter()'>objects</button>
      <button onclick='firstPoint=false; interaction.setCenter(map.getView().getCenter())'>view center</button>
      <button onclick='firstPoint=true;'>first point</button>
    </li><li>
      <hr/>
      Use <i>Shift</i> to add object to tranform
      <hr/>
      Use <i>Shift</i> key to preserve proportions when scaling (see keepAspectRatio).
      <br />
      Use <i>Ctrl</i> key to modify the center when scaling.
    </li></ul>
    <div style="background:white; padding:0 0.45em;"><span id="info"></span>&nbsp;</div>
  </div>
  

  <script type="text/javascript">
    // Layers
    var layers = [
      new ol.layer.Tile({ 
        title:'terrain-background',
        source: new ol.source.Stamen({ layer: 'terrain' })
      })
    ]
    // The map
    var map = new ol.Map({
      target: 'map',
        view: new ol.View({
          zoom: 5,
          center: [261720, 5951081]
        }),
        controls: ol.control.defaults({ "attribution": false }),
        layers: layers
      });

    // Style
    function getStyle(feature) {
      return [ new ol.style.Style({
        image: new ol.style.RegularShape({
          fill: new ol.style.Fill({ color: [0,0,255,0.4]}),
          stroke: new ol.style.Stroke({color: [0,0,255,1],width: 1}),
          radius: 10,
          points: 3,
          angle: feature.get('angle')||0
        }),
        fill: new ol.style.Fill({color: [0,0,255,0.4]}),
        stroke: new ol.style.Stroke({color: [0,0,255,1],width: 1})
      })];
    }
    
    // New vector layer
    var vector = new ol.layer.Vector({
      name: 'Vecteur',
      source: new ol.source.Vector({ wrapX: false }),
      style: getStyle
    })
    map.addLayer(vector);
    vector.getSource().addFeature(new ol.Feature(new ol.geom.Polygon([[[34243, 6305749], [-288626, 5757848], [210354, 5576845], [300000, 6000000], [34243, 6305749]]])));
    vector.getSource().addFeature(new ol.Feature(new ol.geom.LineString([[406033, 5664901], [689767, 5718712], [699551, 6149206], [425601, 6183449]])));
    vector.getSource().addFeature(new ol.Feature(new ol.geom.Point(	[269914, 6248592])));
    vector.getSource().addFeature(new ol.Feature(new ol.geom.Circle( [500000, 6400000], 100000 )));

    // Set cursor style
    ol.interaction.Transform.prototype.Cursors['rotate'] = 'url(\'\') 5 5, auto';
    ol.interaction.Transform.prototype.Cursors['rotate0'] = 'url(\'\') 5 5, auto';

    /** Style the transform handles for the current interaction
    */
    function setHandleStyle(){
      if (!interaction instanceof ol.interaction.Transform) return;
      if ($("#style").prop('checked')) {
        // Style the rotate handle
        var circle = new ol.style.RegularShape({
          fill: new ol.style.Fill({color:[255,255,255,0.01]}),
          stroke: new ol.style.Stroke({width:1, color:[0,0,0,0.01]}),
          radius: 8,
          points: 10
        });
        interaction.setStyle ('rotate',
          new ol.style.Style({
            text: new ol.style.Text ({
              text:'\uf0e2', 
              font:"16px Fontawesome",
              textAlign: "left",
              fill:new ol.style.Fill({color:'red'})
            }),
            image: circle
          }));
        // Center of rotation
        interaction.setStyle ('rotate0',
          new ol.style.Style({
            text: new ol.style.Text ({
              text:'\uf0e2', 
              font:"20px Fontawesome",
              fill: new ol.style.Fill({ color:[255,255,255,0.8] }),
              stroke: new ol.style.Stroke({ width:2, color:'red' })
            }),
          }));
        // Style the move handle
        interaction.setStyle('translate',
          new ol.style.Style({
            text: new ol.style.Text ({
              text:'\uf047', 
              font:"20px Fontawesome", 
              fill: new ol.style.Fill({ color:[255,255,255,0.8] }),
              stroke: new ol.style.Stroke({ width:2, color:'red' })
            })
          }));
        // Style the strech handles
        /* uncomment to style * /
        interaction.setStyle ('scaleh1', 
          new ol.style.Style({
            text: new ol.style.Text ({
            text:'\uf07d', 
            font:"bold 20px Fontawesome", 
            fill: new ol.style.Fill({ color:[255,255,255,0.8] }),
            stroke: new ol.style.Stroke({ width:2, color:'red' })
          })
        }));
        interaction.style.scaleh3 = interaction.style.scaleh1;
        interaction.setStyle('scalev',
          new ol.style.Style({
            text: new ol.style.Text ({
              text:'\uf07e', 
              font:"bold 20px Fontawesome", 
              fill: new ol.style.Fill({ color:[255,255,255,0.8] }),
              stroke: new ol.style.Stroke({ width:2, color:'red' })
            })
          }));
        interaction.style.scalev2 = interaction.style.scalev;
        /**/
      } else {
        interaction.setDefaultStyle ();
      }
      // Refresh
      interaction.set('translate', interaction.get('translate'));
    };

    /** Set properties
    */
    function setPropertie (p) {
      interaction.set(p, $("#"+p).prop('checked'));
      if (!$("#scale").prop("checked")) $("#stretch").prop('disabled', true);
      else $("#stretch").prop('disabled', false);
    }

    function setAspectRatio (p) {
      if ($("#"+p).prop('checked')) interaction.set("keepAspectRatio", ol.events.condition.always);
      else interaction.set("keepAspectRatio", function(e){ return e.originalEvent.shiftKey });
    }

    var interaction = new ol.interaction.Transform ({
      enableRotatedTransform: false,
      /* Limit interaction inside bbox * /
      condition: function(e, features) {
        return ol.extent.containsXY([-465960, 5536486, 1001630, 6514880], e.coordinate[0], e.coordinate[1]);
      },
      /* */
      addCondition: ol.events.condition.shiftKeyOnly,
      // filter: function(f,l) { return f.getGeometry().getType()==='Polygon'; },
      // layers: [vector],
      hitTolerance: 2,
      translateFeature: $("#translateFeature").prop('checked'),
      scale: $("#scale").prop('checked'),
      rotate: $("#rotate").prop('checked'),
      keepAspectRatio: $("#keepAspectRatio").prop('checked') ? ol.events.condition.always : undefined,
      translate: $("#translate").prop('checked'),
      stretch: $("#stretch").prop('checked')
    });
    map.addInteraction(interaction);
    // Style handles
    setHandleStyle();
    // Events handlers
    var startangle = 0;
    var d=[0,0];

    // Handle rotate on first point
    var firstPoint = false;
    interaction.on (['select'], function(e) {
      if (firstPoint && e.features && e.features.getLength()) {
        interaction.setCenter(e.features.getArray()[0].getGeometry().getFirstCoordinate());
      }
    });

    interaction.on (['rotatestart','translatestart'], function(e){
      // Rotation
      startangle = e.feature.get('angle')||0;
      // Translation
      d=[0,0];
    });
    interaction.on('rotating', function (e){
      $('#info').text("rotate: "+((e.angle*180/Math.PI -180)%360+180).toFixed(2)); 
      // Set angle attribute to be used on style !
      e.feature.set('angle', startangle - e.angle);
    });
    interaction.on('translating', function (e){
      d[0]+=e.delta[0];
      d[1]+=e.delta[1];
      $('#info').text("translate: "+d[0].toFixed(2)+","+d[1].toFixed(2)); 
      if (firstPoint) {
        interaction.setCenter(e.features.getArray()[0].getGeometry().getFirstCoordinate());
      }
    });
    interaction.on('scaling', function (e){
      $('#info').text("scale: "+e.scale[0].toFixed(2)+","+e.scale[1].toFixed(2)); 
      if (firstPoint) {
        interaction.setCenter(e.features.getArray()[0].getGeometry().getFirstCoordinate());
      }
    });
    interaction.on(['rotateend', 'translateend', 'scaleend'], function (e) {
      $('#info').text(""); 
    });
    
  </script>

</body>
</html>